<template>
	<view class="pay_d">
		<view class="info">
			<view class="title">{{$t('otc.name34')}}</view>
			<view class="cell">
				<view class="">{{$t('otc.name35')}}</view>
				<view class="">{{info.mai.mobile}}</view>
			</view>
			<view class="accout-info" v-if="info.mai.bank">
				<view class="bank flex">
					<view class="">
						<image src="@/static/index/icon-bank.png" mode=""
							style="width: 20rpx;height: 20rpx;margin-right: 10rpx;"></image>
					</view>
					<view class="">
						银行卡
					</view>
				</view>
				<view class="cell" >
					<view class="">开户行</view>
					<view class="">{{info.mai.bank.bank_addr}}</view>
				</view>
				<view class="cell">
					<view class="">姓名</view>
					<view class="">{{info.mai.bank.name}}</view>
				</view>
				<view class="cell">
					<view class="">银行账号</view>
					<view class="flex">
						<view class="">{{info.mai.bank.bank_code}}</view>
						<view class="" style="margin-left: 15rpx;" @click="copy(info.mai.bank.bank_code)">
							<image style="width: 30rpx;height: 30rpx;" src="@/static/index/icon-copy.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
			<view class="wxpay" v-if="info.mai.wechat">
				<view class="info-item ">
					<view class="lt">
						<view class="one flex">
							<view class="">
								<image src="@/static/index/icon-wx.png" mode=""
									style="width: 20rpx;height: 20rpx;margin-right: 10rpx;"></image>
							</view>
							<view class="">
								微信支付
							</view>
						</view>
						<view class="two">收款二维码</view>
					</view>
					<view class="img" @click="lookImg(info.mai.wechat.wx_image)">
						<image :src="$fun.imgUrl(info.mai.wechat.wx_image)" alt="" srcset="">
					</view>
				</view>
			</view>
			<view class="alipay" v-if="info.mai.alipay">
				<view class="info-item ">
					<view class="lt">
						<view class="one flex">
							<view class="">
								<image src="@/static/index/icon-alipay.png" mode=""
									style="width: 20rpx;height: 20rpx;margin-right: 10rpx;"></image>
							</view>
							<view class="">
								支付宝支付
							</view>
						</view>
						<view class="two">收款二维码</view>
					</view>
					<view class="img" @click="lookImg(info.mai.alipay.ali_image)">
						<image :src="$fun.imgUrl(info.mai.alipay.ali_image)" alt="" srcset="">
					</view>
				</view>
				<view class="flex-between bottom">
					<view class="lable">支付宝账号</view>
					<view class="flex">
						<view class="num">{{info.mai.alipay.ali_mobile}}</view>
						<view class="" style="margin-left: 15rpx;" @click="copy(info.mai.alipay.ali_mobile)">
							<image style="width: 30rpx;height: 30rpx;" src="@/static/index/icon-copy.png" mode=""></image>
						</view>
					</view>
					
				</view>
			</view>
		</view>
		<view class="order-info">
			<view class="title">
				{{$t('otc.name36')}}
			</view>
			<view class="cell">
				<view class="">{{$t('otc.name5')}}</view>
				<view class="">{{info.num}}</view>
			</view>
			<view class="cell">
				<view class="">{{$t('otc.name11')}}</view>
				<view class="">{{info.money}}</view>
			</view>
			<view class="cell">
				<view class="">{{$t('otc.name14')}}</view>
				<view class="">{{info.price}}</view>
			</view>
		</view>
		<!-- <u-form label-width="180" style="margin:20rpx 0 ;background:#FFFFFF;padding: 20rpx 50rpx;">
			<u-form-item v-if="info.mai" label="卖家姓名">
				<u-input border="none" style="background:#FFFFFF" v-model="info.mai.name" disabled />
			</u-form-item>
			<u-form-item v-if="info.mai" label="卖家手机号">
				<u-input border="none" style="background:#FFFFFF" v-model="info.mai.mobile" disabled />
			</u-form-item>
			<u-form-item v-if="info.me" label="买家姓名">
				<u-input border="none" style="background:#FFFFFF" v-model="info.me.truename" disabled />
			</u-form-item>
			<u-form-item v-if="info.me" label="买家手机号">
				<u-input border="none" style="background:#FFFFFF" v-model="info.me.mobile" disabled />
			</u-form-item>
			<u-form-item v-if="info.num" label="订单数量">
				<u-input border="none" style="background:#FFFFFF" v-model="info.num" disabled />
			</u-form-item>
			<u-form-item v-if="info.money" label="订单单价">
				<u-input border="none" style="background:#FFFFFF" v-model="info.money" disabled />
			</u-form-item>
			<u-form-item v-if="info.price" label="订单总额">
				<u-input border="none" style="background:#FFFFFF" v-model="info.price" disabled />
			</u-form-item>
		</u-form>
		<u-form  label-width="180" style="margin:20rpx 0 ;background:#FFFFFF;padding: 20rpx 50rpx;">
		<u-form-item v-if="info.mai" label="开户银行">
			<u-input border="none" disabled style="background:#FFFFFF" v-model="info.mai.bank_addr"  />
		</u-form-item>
		<u-form-item v-if="info.mai" label="银行卡号">
			<u-input border="none" disabled style="background:#FFFFFF" v-model="info.mai.bank_code"  />
		</u-form-item>
		</u-form>
		<u-form  label-width="180" style="margin:20rpx 0 ;background:#FFFFFF;padding: 20rpx 50rpx;">
			<u-form-item>

				<div class="wrweima">
					<div class="erweima" v-if="info.mai.wx_image" @click="Preview_img(info.mai.wx_image)">
						<image :src="$fun.imgUrl(info.mai.wx_image)" alt="" srcset="">
							<p style="background-color:#22ac38">微信收款二维码</p>
					</div>
					<div class="erweima erweimas" v-if="info.mai.ali_image"
						@click="Preview_img(info.mai.ali_image)">
						<image :src="info.mai.ali_name" alt="" srcset="">
							<p>支付宝收款二维码</p>
					</div>
				</div>
			</u-form-item>
			<u-form-item>

				<div class="wrweima">
					<div class="erweima1" v-if="info.image" @click="Preview_img(info.me.wx_image)">
						<image :src="$fun.imgUrl(info.me.wx_image)" alt="" srcset="">
							<p style="background-color:#22ac38">打款截图</p>
					</div>
				</div>
			</u-form-item>
		</u-form> -->
		<u-popup :show="showImg" mode="center" @close="closeModel()">
			<view class="tab_box" :style="{ width: '300px',padding:'5px 20px' }">
				<image style="width: 250px;margin: 0 5px;" :src="$fun.imgUrl(imgSrc)" mode=""></image>
			</view>
		</u-popup>
		<u-popup :show="payImg" mode="center" @close="closeModel()">
			<view class="tab_box" :style="{ width: '300px',padding:'5rpx 10rpx'}">
				<u-form label-width="120" style="margin:20rpx 0 ;background:#FFFFFF;padding: 20rpx 50rpx;">
					<u-form-item label="卖方姓名">
						<u-input border="none" style="background:#FFFFFF" v-if="info.mai" v-model="info.mai.name"
							disabled />
					</u-form-item>
					<u-form-item label="打款金额">
						<u-input border="none" style="background:#FFFFFF" v-if="info" v-model="info.price"
							disabled />
					</u-form-item>
					<u-form-item label="打款截图">
						<image style="background: #F5F5F5;width: 200rpx;height: 200rpx;" v-if="fileList"
							@click="choose_img_upload" :src="$fun.imgUrl(fileList)" alt="">
							<image @click="choose_img_upload" v-else
								style="background: #F5F5F5; width: 150rpx;height: 150rpx;" src="/static/ico-101.png"
								mode=""></image>
					</u-form-item>
					<u-button @click="confirm" style="width: 95%;margin-left: 2.5%;" type="primary">
						确认打款</u-button>
				</u-form>
			</view>
		</u-popup>
		<u-button v-if="info.pay" shape="circle" @click="payImg = true;fileList=''"
			style="width: 95%;margin-top: 50rpx;" type="primary">
			去确认(已经付款给对方)</u-button>
		<view style="height: 30rpx;">

		</view>
	</view>
</template>

<script>
	import uniCopy from '@/components/xb-copy/uni-copy.js'
	// import config from "@/config.js"
	export default {
		data() {
			return {
				info: {
					mai: {
						image: ''
					}
				},
				id: null,
				// 图片查看
				imgSrc: '',
				// 图片弹窗
				showImg: false,
				// 打款弹窗
				payImg: false,
				fileList: ""
			}
		},
		onLoad(options) {
			uni.setNavigationBarTitle({
				title:this.$t('otc.name33')
			})
			this.id = options.id
			this.initDate()
		},
		methods: {
			// 图片预览
			lookImg(item) {
				uni.previewImage({
					urls: [this.$fun.imgUrl(item)] //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			copy(text) {
				uniCopy({
					content: text,
					success: (res) => {
						uni.showToast({
							title: res,
							icon: 'none'
						})
					},
					error: (e) => {
						uni.showToast({
							title: e,
							icon: 'none',
							duration: 3000,
						})
					}
				})
			},
			initDate() {
				this.$fun.ajax.post('/otc/dakuan', {
					id: this.id
				}).then(res => {
					this.info = res.data
				})
			},
			closeModel() {
				this.payImg = false
				this.showImg = false
			},
			// 查看图片
			Preview_img(url) {
				this.showImg = true
				this.imgSrc = url
			},
			async choose_img_upload() {
				const _this = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: function(res) {
						_this.handleUploadFile(res.tempFilePaths);
					}
				});
			},
			// 上传头像
			handleUploadFile(data, str1, str2) {
				const _this = this;
				const filePath = data.path || data[0];
				_this.$fun.uploadPic(filePath, 'file')
					.then(r => {
						_this.fileList = r.data.url;
					});
			},
			confirm() {
				if (!this.fileList) {
					this.$util.msg('请上传打款凭证!')
					return false
				}
				this.$fun.ajax.post('/otc/pay', {
					id: this.id,
					image: this.fileList
				}).then(res => {
					this.$fun.msg(res.msg)
					if (res.code == 1) {
						this.payImg = false
						this.$fun.jump('', 4, 1200)
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #F5F5F5;
	}

	.pay_d {
		padding: 30rpx;

		.cell {
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			display: flex;
			line-height: 50rpx;
			justify-content: space-between;
			margin: 10rpx;
		}

		.info {
			// height: 764rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 20rpx;
			.title {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				color: #19181A;
				line-height: 32rpx;
				margin: 15rpx 0;
			}

			.accout-info {
				

				.bank {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #999999;
					line-height: 50rpx;
				}

			}

			.info-item {
				padding: 20rpx 0;
				display: flex;
				justify-content: space-between;

				.lt {
					.one {
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #999999;
						margin: 20rpx 0;
					}

					.two {
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
						line-height: 28rpx;
					}
				}

				.img {
					width: 120rpx;
					height: 120rpx;
				}
			}

			.wxpay {
				padding: 20rpx;
				border-top: 1rpx solid #EAEAEA;
			}

			.alipay {
				padding: 20rpx;
				border-top: 1rpx solid #EAEAEA;

				.bottom {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
					line-height: 28rpx;
					margin-top: 20rpx;

					.lable {}

					.num {}
				}
			}
		}

		.order-info {
			margin: 30rpx 0;
			height: 296rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 20rpx;

			.title {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				color: #19181A;
				line-height: 32rpx;
				padding: 20rpx 0;
			}
		}

		.wrweima {
			width: 100%;
			display: flex;
			justify-content: space-between;

			.erweima1 {
				width: 100%;
				text-align: center;

				image {
					height: 300rpx;
					margin: 5rpx auto;
				}
			}

			image {
				width: 300rpx;
				height: 300rpx;
			}

			p {
				margin: 0 auto;
				text-align: center;
				width: 150px;
				height: 30px;
				background-color: #03a0e9;
				font-family: AdobeHeitiStd-Regular;
				font-size: 13px;
				font-weight: bold;
				font-stretch: normal;
				line-height: 30px;
				letter-spacing: 0px;
				color: #ffffff;
			}
		}

		.u-btn--primary {
			color: #fff;
			border-color: #2979ff;
			background-color: #2979ff !important;

		}
	}
</style>